<template>
  <view class="content">
    <view class="row" style="width: 100%;">
      <view>
        <up-text type="" :bold="true" color="#F53B02" text="*" size="32"></up-text>
      </view>
      <up-text type="main" :bold="true" text="请描述退款原因" size="32"></up-text>
    </view>
    <up-textarea v-model="comment" placeholder="亲若已收到货，请传货品图片，否则可能会影响退款，若没收到货，请上传该订单的付款截图" height="200"
      :customStyle="inputCustomStyle"></up-textarea>
    <view class="row" style="width: 100%;">
      <view>
        <up-text type="" :bold="true" color="#F53B02" text="*" size="32"></up-text>
      </view>
      <up-text type="main" :bold="true" text="联系方式" size="32"></up-text>
    </view>
    <up-input v-model="phone" placeholder="请输入联系方式（必填）" :customStyle="inputCustomStyle"></up-input>
    <view class="row" style="width: 100%;">
      <view>
        <up-text type="" :bold="true" color="#F53B02" text="*" size="32"></up-text>
      </view>
      <up-text type="main" :bold="true" text="请上传图片" size="32"></up-text>
    </view>
    <view style="width: 100%; margin-top: 20rpx">
      <up-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="3"
        :previewFullImage="true" width="224" height="176" :uploadText="`上传图片（${fileList3.length}/3）`">
      </up-upload>
    </view>
    <view class="bottomWrap">
      <up-button type="primary" text="提交" @click="saveInfo"></up-button>
    </view>
  </view>
</template>

<script>
import { uploadFile } from '@/services/uploadFile';
import { orderRefund } from '@/services/order';
export default {
  onLoad(option) {
    const _that = this;
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('orderDetail', ({ data }) => {
      console.log('orderDetail', data)
      _that.orderDetail = data;
    })
  },
  data() {
    return {
      timer: 0,
      orderDetail: {},
      comment: '',
      phone: '',
      fileList3: [],
      inputCustomStyle: {
        margin: '16rpx 0 72rpx 0', width: 'calc(100% - 36rpx)', padding: '18rpx'
      }
    };
  },
  beforeUnmount() {
    this.timer && clearTimeout(this.timer);
  },
  methods: {
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await uploadFile(lists[i].url);
        console.log('result', result);
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result.url,
        }))
        fileListLen++
      }
    },
    async saveInfo() {
      const _that = this;
      const { fileList3, comment, orderDetail, phone } = _that;
      if (!comment || !phone || !fileList3?.length) {
        uni.$u.toast('请补充所需信息');
        return;
      }
      const { id } = orderDetail || {};
      const params = {
        id,
        contactPhone: phone,
        resion: comment,
      };
      if (fileList3?.length) {
        params.imageList = fileList3.map((item) => item.url);
      }
      orderRefund(params).then((res) => {
        if (res.success) {
          _that.timer = setTimeout(() => {
            uni.navigateBack();
          }, 1500)
          uni.$u.toast('提交成功');
        } else {
          uni.$u.toast('提交失败');
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 90rpx 72rpx;
}

.itemWrap {
  margin: 0 30rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #BBBBBB;
  width: calc(100% - 60rpx);
}

.bottomWrap {
  margin: 108rpx 30rpx 0;
  width: calc(100% - 60rpx)
}
</style>
